<!DOCTYPE html>
<!-- saved from url=(0097)http://pyq001.1y0g.com/view3?uid=oJ642szr4G-SKgO5KFnUdr_NfWIU&from=singlemessage&isappinstalled=0 -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>我的朋友圈</title>
<meta charset="utf-8">
<meta name="viewport"
	content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<link rel="stylesheet" href="css/app.css">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

<style type="text/css">
.weui_mask_transition {
	display: none;
	position: fixed;
	z-index: 1;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0);
	-webkit-transition: background .3s;
	transition: background .3s;
}

.weui_fade_toggle {
	background: rgba(0, 0, 0, 0.6);
}

.weui_actionsheet_toggle {
	-webkit-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	transform: translate(0, 0);
}

.weui_actionsheet_menu {
	background-color: #FFFFFF;
}

.weui_actionsheet_cell:before {
	content: " ";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 1px;
	border-top: 1px solid #D9D9D9;
	-webkit-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-transform: scaleY(0.5);
	-ms-transform: scaleY(0.5);
	transform: scaleY(0.5);
}

.weui_actionsheet_cell:first-child:before {
	display: none;
}

.weui_actionsheet_cell {
	position: relative;
	padding: 10px 0;
	text-align: center;
	font-size: 18px;
}

.weui_actionsheet_cell.title {
	color: #999;
}

.weui_actionsheet_action {
	margin-top: 6px;
	background-color: #FFFFFF;
}

img {
	transform: scale(1); /*图片原始大小1倍*/
	transition: all ease 0.5s;
} /*图片放大所用时间*/
img.active {
	transform: scale(2); /*图片需要放大3倍*/
	position: absolute;
	left:20%;
	/*是相对于前面的容器定位的，此处要放大的图片，不能使用position：relative；以及float，否则会导致z-index无效*/
	z-index: 100;
}
</style>

</head>
<body>
	<div id="actionSheet_wrap">

		<div style="margin: 0 auto; display: none;">
			<img class="data-avt" src="images/0.jpg">
		</div>
		<header id="abc">
			<img id="bg" src="images/bg.jpg">
			<p id="user-name" class="data-name">{{data.nickname}}</p>
			<img id="avt" class="data-avt" :src="data.avatar">
		</header>
		<div id="main">
			<div id="vueBox">
				<div id="list" v-for="(item,index) in list" >
					<ul>
						<li>
							<div class="po-avt-wrap">
								<img class="po-avt data-avt" :src="item.avatar">
							</div>
							<div class="po-cmt">
								<div class="po-hd">
									<p class="po-name">
										<span class="data-name">{{item.nickname}}</span>
									</p>
									<div class="post">
										<p>{{item.content}}</p>
										<p>
											<img  :class="{'active':index == preIndex}" @click="imgScc(index)"
												:src="item.image" style="width: 150px;">
								</div>
							</div>
							</div>
						</li>

					</ul>
				</div>
			</div>

		</div>

		<script type="text/javascript">
		let flag = false;
			const vm = new Vue({
				el : "#vueBox",
				data : {
					isChoose : false,
					list:[],
					preIndex:-1,
				},
				 mounted() {
					axios.post(
							"/coach/findMyFriendsDynamic"
						).then(res=>{
							if(res.data.code==500){
								location.href="/error/500.html";
							}
							console.log(res.data.data);
							this.list =res.data.data;
						});
					
				},
				methods : {
					imgScc : function(index) {
						if(!flag){
							this.preIndex = index;
							flag = true;
						}else{
							this.preIndex =-1;
							flag = false;
						}

					}
				}
			});
		</script>
		<script type="text/javascript">
			new Vue({
				el : "#abc",
				data : {
					data:"",
				},
				 mounted() {
					axios.post(
							"/coach/findCoachByCid"
						).then(res=>{
							if(res.data.code==500){
								location.href="/error/500.html";
							}
							console.log(res.data.data);
							this.data=res.data.data;
						});
					
				}
			});
		</script>
</body>
</html>